body.focus-mode {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

body.focus-mode .main-content {
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.focus-mode .focus-mode-panel {
    min-height: 100vh !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.focus-mode .dashboard-header,
body.focus-mode .dashboard-grid,
body.focus-mode .footer,
body.focus-mode .quick-stats,
body.focus-mode .content-card,
body.focus-mode .form-card,
body.focus-mode .streak-card,
body.focus-mode .motivation-card,
body.focus-mode .pro-tip,
body.focus-mode .controls-bar,
body.focus-mode .stats-overview-cards,
body.focus-mode .charts-container,
body.focus-mode .toast-container,
body.focus-mode .feedback-btn,
body.focus-mode .chatbot-fab,
body.focus-mode .student-view-bar,
body.focus-mode .mobile-nav-controls {
    display: none !important;
}

body.focus-mode .focus-mode-panel {
    display: block !important;
}

body.focus-mode::after {
    display: none !important;
}


/* Hide the old video entirely */
.focus-portal-video { display: none !important; }
video.focus-portal-video { display: none !important; }

/* ---------- Canvas warp layer ---------- */
#portalCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.focus-mode #portalCanvas { opacity: 1; }

/* ---------- Aurora nebula layers ---------- */
.portal-aurora {
  position: fixed;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 170, 51, 0.18), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(214, 31, 0, 0.20), transparent 45%),
    radial-gradient(circle at 50% 20%, rgba(139, 92, 246, 0.14), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.12), transparent 55%);
  animation: auroraDrift 24s ease-in-out infinite alternate;
  filter: blur(40px);
}
body.focus-mode .portal-aurora { opacity: 1; }
@keyframes auroraDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(2%, -1%) scale(1.05) rotate(2deg); }
  100% { transform: translate(-1%, 2%) scale(1.02) rotate(-2deg); }
}

/* ---------- Rotating ring stack ---------- */
.portal-rings {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body.focus-mode .portal-rings { opacity: 1; }

.portal-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  will-change: transform, opacity;
}

/* 5 rings, each with its own size, speed, direction, and colour */
.ring.r1 {
  width: 42vmin; height: 42vmin;
  border-color: rgba(255, 170, 51, 0.55);
  box-shadow: 0 0 30px rgba(255, 170, 51, 0.35), inset 0 0 30px rgba(255, 170, 51, 0.20);
  animation: ringSpin 8s linear infinite;
}
.ring.r2 {
  width: 56vmin; height: 56vmin;
  border-color: rgba(255, 71, 20, 0.45);
  box-shadow: 0 0 40px rgba(255, 71, 20, 0.30), inset 0 0 40px rgba(255, 71, 20, 0.18);
  border-style: dashed;
  animation: ringSpinRev 12s linear infinite;
}
.ring.r3 {
  width: 72vmin; height: 72vmin;
  border-color: rgba(214, 31, 0, 0.35);
  box-shadow: 0 0 55px rgba(214, 31, 0, 0.25), inset 0 0 55px rgba(214, 31, 0, 0.15);
  animation: ringSpin 18s linear infinite;
}
.ring.r4 {
  width: 90vmin; height: 90vmin;
  border-color: rgba(139, 92, 246, 0.28);
  border-width: 1px;
  border-style: dotted;
  animation: ringSpinRev 26s linear infinite;
}
.ring.r5 {
  width: 108vmin; height: 108vmin;
  border-color: rgba(59, 130, 246, 0.22);
  border-width: 1px;
  box-shadow: 0 0 70px rgba(59, 130, 246, 0.18);
  animation: ringSpin 34s linear infinite;
}
@keyframes ringSpin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ringSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Radial gradient glow rings (soft, no hard edge) */
.portal-rings .glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 51, 0.10) 0%, transparent 60%);
  filter: blur(20px);
  animation: glowPulse 5s ease-in-out infinite alternate;
}
.glow.g1 { width: 60vmin; height: 60vmin; }
.glow.g2 { width: 90vmin; height: 90vmin; background: radial-gradient(circle, rgba(214, 31, 0, 0.08) 0%, transparent 65%); animation-duration: 7s; }
.glow.g3 { width: 130vmin; height: 130vmin; background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%); animation-duration: 9s; }
@keyframes glowPulse {
  0%   { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1.04); opacity: 1; }
}

/* ---------- Pulsing core ---------- */
.portal-core {
  position: fixed;
  top: 50%; left: 50%;
  width: 20vmin; height: 20vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 200, 120, 0.75) 12%,
    rgba(255, 71, 20, 0.45) 30%,
    rgba(214, 31, 0, 0.20) 55%,
    transparent 75%);
  box-shadow:
    0 0 60px rgba(255, 170, 51, 0.55),
    0 0 140px rgba(255, 71, 20, 0.35),
    0 0 240px rgba(214, 31, 0, 0.20);
  animation: corePulse 3s ease-in-out infinite;
  mix-blend-mode: screen;
}
body.focus-mode .portal-core { opacity: 1; }
@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}

/* ---------- Entry whoosh (whole scene zooms in once on activation) ---------- */
body.focus-mode .portal-rings,
body.focus-mode .portal-core,
body.focus-mode .portal-aurora {
  animation: portalEntry 1.6s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes portalEntry {
  0%   { opacity: 0; transform: scale(0.4); filter: blur(20px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Existing .portal-overlay rings get suppressed — we replace them */
body.focus-mode .portal-overlay .portal-ring,
body.focus-mode .portal-overlay .portal-vortex {
  display: none !important;
}

/* Make sure focus-mode content sits above all this */
body.focus-mode .focus-mode-panel { position: relative; z-index: 5; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portal-rings .ring,
  .portal-rings .glow,
  .portal-core,
  .portal-aurora { animation: none !important; }
  #portalCanvas { display: none !important; }
}

/* Mobile: tone down blur, fewer layers */
@media (max-width: 768px) {
  .portal-aurora { filter: blur(28px); }
  .portal-rings .ring { border-width: 1.5px; }
  .ring.r4, .ring.r5 { display: none; }
}